<template>
	<div class="login">
     <div class="container">
      <div class="form-box" :style="formBoxStyle">
        <form v-show="isRegister" class="register-box " >
          <h1>用户注册</h1>
          <input type="text" name="username" placeholder="手机号" />
          <input type="password" name="password" placeholder="密码" />
          <button>注册</button>
        </form>
        <form v-show="!isRegister" class="login-box" >
          <h1>用户登录</h1>
          <input type="text" name="username" placeholder="手机号" />
          <input type="password" name="password" placeholder="密码" />
          <button>登录</button>
		  <el-link style="margin:20px;">忘记密码</el-link>
        </form>
      </div>
      <div v-show="isRegister" class="con-box left" >
        <p>已有账号!</p>
        <button id="login" @click="goLogin()">去登录</button>
      </div>
      <div v-show="!isRegister" class="con-box right" >
        <p>没有账号？</p>
        <button id="register" @click="goRegister()">去注册</button>
      </div>
    </div>		
</div>

</template>

<script setup>
import {ref} from 'vue'
    const isRegister = ref(false); // 控制显示登录还是注册
	const formBoxStyle = ref({ transform: 'translateX(0%)' }); // 控制表单盒子的X轴偏移

	function goRegister() {
	  isRegister.value = true;
	  formBoxStyle.value.transform = 'translateX(80%)'; // 负值表示向左滑动
	}

	function goLogin() {
	  isRegister.value = false;
	  formBoxStyle.value.transform = 'translateX(0%)';
	}

</script>

<style lang="scss" scoped>
	.login{
		background-color: #f5f5f5;
		height: 100vh;
		display: flex;
	}
    .container {
      background-color: #fff;
      width: 650px;
      height: 415px;
      border-radius: 5px;
      box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
      position: relative;
	  margin: auto;
    }

    .form-box {
      position: absolute;
      top: -10%;
      left: 5%;
      background-color: #9797d8;
      width: 320px;
      height: 500px;
      border-radius: 5px;
      box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2;
      transition: 0.5s ease-in-out;
    }

    .register-box,
    .login-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }
    h1 {
      text-align: center;
      margin-bottom: 55px;
      color: #fff;
      letter-spacing: 5px;
    }

    input {
      background-color: transparent;
      width: 70%;
      color: #fff;
      border: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.4);
      padding: 10px 0;
      text-indent: 10px;
      margin: 8px 0;
      font-size: 14px;
      letter-spacing: 2px;
    }

    input::placeholder {
      color: #fff;
    }

    input:focus {
      color: #595dad;
      outline: none;
      border-bottom: 1px solid #5d55ad80;
      transition: 0.5s;
    }

    input:focus::placeholder {
      opacity: 0;
    }

    .form-box button {
      width: 70%;
      margin-top: 35px;
      background-color: #f6f6f6;
      outline: none;
      border-radius: 8px;
      padding: 13px;
      color: #5855ad;
      letter-spacing: 2px;
      border: none;
      cursor: pointer;
    }

    .form-box button:hover {
      background-color: #6464ad;
      color: #f6f6f6;
      transition: background-color 0.5s ease;
    }

    .con-box {
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    .con-box.left {
      left: -2%;
    }
    .con-box.right {
      right: -2%;
    }

    .con-box h2 {
      color: #8e9aaf;
      font-size: 25px;
      font-weight: bold;
      letter-spacing: 3px;
      text-align: center;
      margin-bottom: 4px;
    }

    .con-box p {
      font-size: 12px;
      letter-spacing: 2px;
      color: #8e9aaf;
      text-align: center;
    }

    .con-box span {
      color: #d3b7d8;
    }

    .con-box button {
      margin-top: 3%;
      background-color: #fff;
      color: #5253ad;
      border: 1px solid #7a80d8;
      padding: 6px 10px;
      border-radius: 5px;
      letter-spacing: 1px;
      outline: none;
      cursor: pointer;
    }

    .con-box button:hover {
      background-color: #6464ad;
      color: #fff;
    }
</style>